<template>
	<view class="open_mh_view">
		<view class="open_mh_mask" @click="closeOpenView"></view>
		<view class="kj_jp_view">
			<view class="kj_jp_title">
				<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/e6d7ce8e03a49aa8e09e31096cd7a5fe.png" style="width:200px; height:90px;" class="back-img" mode="aspectFit"></image>
			</view>
			<view class="kj_jp_list">
				<scroll-view style="max-height: 850rpx;" class="prize-pop-wrap" scroll-y>
					<view class="prize-pop common_bg">
						<view v-if="prizeShowList.length == 1" class="prize-box">
							<view v-for="(item, i) in prizeShowList" :key="i" class="prize-box-item common_bg upin" >
								<view class="pic">
									<image :src="item.goods_image" mode="aspectFit" />
								</view>
								<view class="prize_info">
									<view class="title hang1">
										{{ item.goods_title_text }}
									</view>
									<view class="price">
										<text>
											¥
											<text>{{(item.goods_price*1).toFixed(2) }}</text>
										</text>
									</view>
									<view class="p_number">x {{item.count}}</view>
								</view>
							</view>
						</view>
						<view v-if="prizeShowList.length == 2" class="prize-box three">
							<view v-for="(item, i) in prizeShowList" :key="i" class="prize-box-item common_bg upin" >
								<view class="pic">
									<image :src="item.goods_image" mode="aspectFit" />
								</view>
						
								<view class="prize_info">
									<view class="title hang1">
										{{ item.goods_title_text }}
									</view>
										
									<view class="price">
										<text>
											¥
											<text>{{ item.goods_price }}</text>
										</text>
									</view>
									<view class="p_number">x {{item.count}}</view>
								</view>
							</view>
						</view>
						<view v-if="prizeShowList.length >= 3" class="prize-box three">
							<view v-for="(item, i) in prizeShowList" :key="i" class="prize-box-item common_bg upin" >
								<view class="pic">
									<image :src="item.goods_image" mode="aspectFit" />
								</view>
						
								<view class="prize_info">
									<view class="title hang1">
										{{ item.goods_title_text }}
									</view>
										
									<view class="price">
										<text>
											¥
											<text>{{ item.goods_price }}</text>
										</text>
									</view>
									<view class="p_number">x {{item.count}}</view>
								</view>
							</view>
						</view>
						
					</view>
				</scroll-view>
			</view>
			<view class="kj_jp_btn">
				<view class="btn_li" @click="goToCangku()">前往仓库</view>
				<view class="btn_li" @click="closeOpenView">再来一次</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name:'MhOpen',
		props : {
			prizeResult: {
				type: Array
			},
			prizeShowList: {
				type: Array,
				default:[],
			},
		},
		data() {
			return {
				data: ''
			}
		},
		methods : {
			goToCangku(){
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				});
			},
			closeOpenView(){
				this.$emit("closeOpenView");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.open_mh_view{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		.kj_jp_btn{
			display: flex;
			justify-content: space-around;
			margin-top:36rpx;
			.btn_li{
				width: 240rpx;
				height:84rpx;
				text-align: center;
				line-height: 84rpx;
				color:#fff;
				font-size: 13px;
				background:url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/18598a895b48804e4020da94d60616be.png") no-repeat center center;
			}
		}
		
		.open_mh_mask{
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			z-index: 10;
		}
		.kj_jp_view{
			position: relative;
			width: 90%;
			z-index: 30;
			.kj_jp_title{ 
				text-align:center; 
				width:400rpx;
				height:180rpx;
				position: absolute;
				left:50%;
				top:-50rpx;
				margin-left:-200rpx;
			}
			.kj_jp_list{
				padding-top:90rpx;
				min-height:450rpx;
				background:#fff;
				border:26rpx solid #ecc6fd;
				border-radius:40rpx;
			}
		}
	}
	.open_mh_view{
		.prize-pop {
			z-index: 10;
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			.common_bg{
				background:#af99ff;
				border:10rpx solid #9176f5;
				border-radius:20rpx;
				overflow: hidden;
			}
			.prize-box {
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				align-items: center;
				padding: 30rpx 10rpx;
				
				&-item {
					width: 428rpx;
					box-sizing: border-box;
					padding:26rpx;
					margin-bottom:20rpx;
					.pic {
						width: 100%;
						height: 240rpx;
						display: flex;
						justify-content:center;
						align-items: center;
						background:#fff;
						image{ width: 100%; height: 100%; }
					}
					.prize_info{
						.p_number{
							color:#fff;
							text-align: center;
						}
					}
					.title {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						width: 100%;
						height:22px; 
						line-height: 22px;
						margin-top:10rpx;
						box-sizing: border-box;
						text-align: center;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal !important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical
					}
					.price {
						margin-top:10rpx;
						width: 100%;
						box-sizing: border-box;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						text-align: center;
						text {
							font-size: 24rpx;							
							text {
								font-size: 28rpx;
							}
						}
					}
				}
				&.two{
					justify-content: space-around;
					.prize-box-item{
						width: 47%;
					}
				}
				&.three{
					justify-content: space-around;
					.prize-box-item{
						width: 30%;
						padding: 16rpx;
						.pic {
							width: 100%;
							height: 180rpx;
							display: flex;
							justify-content:center;
							align-items: center;
							background:#fff;
							image{ width: 100%; height: 100%; }
						}
						.title {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							width: 100%;
							margin-top:10rpx;
							box-sizing: border-box;
							text-align: center;
							display: -webkit-box;
							overflow: hidden;
							white-space: normal !important;
							text-overflow: ellipsis;
							word-wrap: break-word;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical
						}
					}
				}
			}
		}
	}
</style>